<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <h1>标题</h1>
        <p class="pp">123</p>
        <p class="pp">123</p>
        <p class="pp">123</p>
        <p class="pp">123</p>
        <p id="pp1">我是ID的P</p>
        <span>456</span>
    </div>

    <form action="" name="" id="">
        <input type="text" id="text1" name="username"><br>
        <input type="password" id="text2" name="pwd">
        男<input type="radio" name="gender" id="radio1">
        女<input type="radio" name="gender" id="radio2">
    </form>


    <script>
        // 1、getElementById 通过id的方式去获取页面元素（选择标签）单个元素
        // get 获取
        // Element 元素
        // by 通过
        // id
        let pid = document.getElementById('pp1')
        // console.log(pid)
        // document.writeln(pid) 是个对象  不能在页面输出

        // 2、getElementsByTagName  根据标签名获取 返回伪数组
        // Tag 标签 标记
        let pAll = document.getElementsByTagName('p') // 选择的是 p  标签
        console.log(pAll)

        // 3、getElementsByClassName   根据类名获取  返回伪数组
        let pClass = document.getElementsByClassName('pp')
        console.log(pClass)
        
        // 4. getElementsByName  根据name属性获取 返回伪数组
        let inputName = document.getElementsByName('gender')
        console.log(inputName)
        
        
    </script>
</body>
</html>